<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">CSS base</h1>
</div>

<div class="hbox hbox-auto-xs hbox-auto-sm">
	<div class="col">
    	<div class="clearfix padder-md">
			<h4  class="m-t-xl">Colors</h4>

      		<p><strong>8 default color palettes</strong>, build colorful widgets. you can open the less/app.variables.less to config your own colors(<code>@brand-primary, @brand-success, @brand-warning, @brand-danger, @brand-info, @brand-black, @brand-dark, @brand-light</code>).</p>
      		<p><strong>Use less file to build your colors</strong>, You can use the mixin wariant. use <code>.color-variant</code> and <code>.font-variant</code> to build the color scheme, check more details in the css/less/app.colors.less.</p>

      		<div class="row">
        		<div class="col-sm-6">
          			<p>.bg-light</p>
          			<div class="m-b">
            			<span class="bg-light hbox">
              			<span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span></span>
          			</div>
          			<p>.bg-dark</p>
		          	<div class="m-b">
		            	<span class="bg-dark hbox">
		              		<span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
		           	 	</span>
		          	</div>
          			<p>.bg-black</p>
		          	<div class="m-b">
		            	<span class="bg-black hbox">
		              		<span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
		           	 	</span>
		          	</div>
			        <p>.bg-primary</p>
			        <div class="m-b">
			          	<span class="bg-primary hbox">
			            	<span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
			          	</span>
			        </div>
       		 	</div>
		        <div class="col-sm-6">
		          	<p>.bg-info</p>
		          	<div class="m-b">
		            	<span class="bg-info hbox">
		              		<span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
		            	</span>
		          	</div>
		          	<p>.bg-success</p>
		          	<div class="m-b">
			            <span class="bg-success hbox">
			              	<span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
			            </span>
		          	</div>
		          	<p>.bg-warning</p>
		          	<div class="m-b">
		            	<span class="bg-warning hbox">
		              		<span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
		            	</span>
		          	</div>
		          	<p>.bg-danger</p>
		          	<div class="m-b">
		            	<span class="bg-danger hbox">
		              		<span class="col padder-v text-center dker">.dker</span><span class="col padder-v text-center dk">.dk</span><span class="col padder-v text-center bg">.bg</span><span class="col padder-v text-center lt">.lt</span><span class="col padder-v text-center lter">.lter</span>
		            	</span>
		          	</div>
		        </div>
      		</div>


	      	<div id="layout" class="wrapper"></div>
	      	<div class="line b-b"></div>
	      	<h4  class="m-t-xl">Layout</h4>
		    <p><strong>Fix header</strong>, use <code>.app-header-fixed</code> class on ".app" to fixed header.position</p>
		    <p><strong>Fix aside</strong>, use <code>.app-aside-fixed</code> class on ".app" to fixed aside position.</p>
		    <p><strong>Fold aside</strong>, use <code>.app-aside-folded</code> class on ".app" to fold aside.</p>
		    <p><strong>Hbox</strong>, use <code>.hbox</code> and <code>.col</code> to build column layout. and you can use the <code>.w-lg, .w-md, .w, .w-sm, .w-xs</code> to fix column width. and use <code>.hbox-auto-sm, .hbox-auto-xs</code> to disable hbox on small screen.</p>
		
	      	<div id="utilities" class="wrapper"></div>
	      	<div class="line b-b"></div>
	      	<h4  class="m-t-xl">CSS Utilities</h3>
      		<table class="table table-border bg-white-only b-a">
		        <tbody>
		          <tr class="bg-light lt">
		            <td colspan="2">Margin</td>
		          </tr>
		          <tr>
		            <td>.m</td>
		            <td>margin: 15px</td>
		          </tr>
		          <tr>
		            <td>.m-xs</td>
		            <td>margin: 5px</td>
		          </tr>
		          <tr>
		            <td>.m-sm</td>
		            <td>margin: 10px</td>
		          </tr>
		          <tr>
		            <td>.m-md</td>
		            <td>margin: 20px</td>
		          </tr>
		          <tr>
		            <td>.m-lg</td>
		            <td>margin: 30px</td>
		          </tr>
		          <tr>
		            <td>.m-n</td>
		            <td>margin: 0px</td>
		          </tr>
		          <tr>
		            <td>.m-l</td>
		            <td>margin-left: 15px</td>
		          </tr>
		          <tr>
		            <td>.m-l-xs</td>
		            <td>margin-left: 5px</td>
		          </tr>
		          <tr>
		            <td>.m-l-sm</td>
		            <td>margin-left: 10px</td>
		          </tr>
		          <tr>
		            <td>.m-l-md</td>
		            <td>margin-left: 20px</td>
		          </tr>
		          <tr>
		            <td>.m-l-lg</td>
		            <td>margin-left: 30px</td>
		          </tr>
		          <tr>
		            <td>.m-l-xl</td>
		            <td>margin-left: 40px</td>
		          </tr>
		          <tr>
		            <td>.m-l-xxl</td>
		            <td>margin-left: 50px</td>
		          </tr>
		          <tr>
		            <td>.m-l-none</td>
		            <td>margin-left: 0px</td>
		          </tr>
		          <tr>
		            <td>.m-l-n</td>
		            <td>margin-left: -15px</td>
		          </tr>
		          <tr>
		            <td>.m-l-n-xxs</td>
		            <td>margin-left: -1px</td>
		          </tr>
		          <tr>
		            <td>.m-l-n-xs</td>
		            <td>margin-left: -5px</td>
		          </tr>
		          <tr>
		            <td>.m-l-n-sm</td>
		            <td>margin-left: -10px</td>
		          </tr>
		          <tr>
		            <td>.m-l-n-md</td>
		            <td>margin-left: -20px</td>
		          </tr>
		          <tr>
		            <td>.m-l-n-lg</td>
		            <td>margin-left: -30px</td>
		          </tr>
		          <tr>
		            <td>.m-l-n-xl</td>
		            <td>margin-left: -40px</td>
		          </tr>
		          <tr>
		            <td>.m-l-n-xxl</td>
		            <td>margin-left: -50px</td>
		          </tr>
		          <tr>
		            <td colspan="2">.m-r <em>(margin right)</em> , m-t <em>(margin top)</em> , m-b <em>(margin bottom)</em> have the same classes as the .m-l.</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Border</td>
		          </tr>
		          <tr>
		            <td>.b-a</td>
		            <td>border:1px solid @border-color(see app.variables.less)</td>
		          </tr>
		          <tr>
		            <td>.b-l</td>
		            <td>border left</td>
		          </tr>
		          <tr>
		            <td>.b-t</td>
		            <td>border top</td>
		          </tr>
		          <tr>
		            <td>.b-r</td>
		            <td>border right</td>
		          </tr>
		          <tr>
		            <td>.b-b</td>
		            <td>border bottom</td>
		          </tr>
		          <tr>
		            <td>.b-light, .b-dark, .b-primary, .b-success, .b-info, .b-warning, .b-danger, .b-black, .b-white</td>
		            <td>border with specific color.</td>
		          </tr>
		          <tr>
		            <td>.b-2x</td>
		            <td>border width with 2px</td>
		          </tr>
		          <tr>
		            <td>.b-3x</td>
		            <td>border width with 3px</td>
		          </tr>
		          <tr>
		            <td>.no-border</td>
		            <td>border width: 0</td>
		          </tr>
		          <tr>
		            <td>.no-border-xs</td>
		            <td>border width: 0 on etremely small screen.</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Radius</td>
		          </tr>
		          <tr>
		            <td>.r</td>
		            <td>border-radius: @border-radius-base</td>
		          </tr>
		          <tr>
		            <td>.r-l</td>
		            <td>border-radius: @border-radius-base 0 0 @border-radius-base</td>
		          </tr>
		          <tr>
		            <td>.r-r</td>
		            <td>border-radius: 0 @border-radius-base @border-radius-base 0</td>
		          </tr>
		          <tr>
		            <td>.r-t</td>
		            <td>border-radius: @border-radius-base @border-radius-base 0 0</td>
		          </tr>
		          <tr>
		            <td>.r-b</td>
		            <td>border-radius: 0 0 @border-radius-base @border-radius-base</td>
		          </tr>
		          <tr>
		            <td>.r-2x</td>
		            <td>radius size: 2 x @border-radius-base</td>
		          </tr>
		          <tr>
		            <td>.r-3x</td>
		            <td>radius size: 3 x @border-radius-base</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Padder and Wrapper</td>
		          </tr>
		          <tr>
		            <td>.padder</td>
		            <td>padding-left: 15px; padding-right: 15px</td>
		          </tr>
		          <tr>
		            <td>.padder-md</td>
		            <td>padding-left: 20px; padding-right: 20px</td>
		          </tr>
		          <tr>
		            <td>.padder-lg</td>
		            <td>padding-left: 30px; padding-right: 30px</td>
		          </tr>
		          <tr>
		            <td>.no-padder</td>
		            <td>padding: 0</td>
		          </tr>
		          <tr>
		            <td>.wrapper</td>
		            <td>padding: 15px</td>
		          </tr>
		          <tr>
		            <td>.wrapper-sm</td>
		            <td>padding: 10px</td>
		          </tr>
		          <tr>
		            <td>.wrapper-xs</td>
		            <td>padding: 5px</td>
		          </tr>
		          <tr>
		            <td>.wrapper-md</td>
		            <td>padding: 20px</td>
		          </tr>
		          <tr>
		            <td>.wrapper-lg</td>
		            <td>padding: 30px</td>
		          </tr>
		          <tr>
		            <td>.wrapper-xl</td>
		            <td>padding: 50px</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Text</td>
		          </tr>
		          <tr>
		            <td>.text-u-c</td>
		            <td>text uppercase</td>
		          </tr>
		          <tr>
		            <td>.text-l-t</td>
		            <td>text line through</td>
		          </tr>
		          <tr>
		            <td>.text-u-l</td>
		            <td>text under line</td>
		          </tr>
		          <tr>
		            <td>.text-ellipsis</td>
		            <td>display text in one line with ellipsis</td>
		          </tr>
		          <tr>
		            <td>.text-center-xs</td>
		            <td>center text only on extremely small devices</td>
		          </tr>
		          <tr>
		            <td>.text-left-xs</td>
		            <td>align text left only on extremely small devices</td>
		          </tr>
		          <tr>
		            <td>.text-right-xs</td>
		            <td>align text right only on extremely small devices</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Width and Height</td>
		          </tr>
		          <tr>
		            <td>.w-xxl</td>
		            <td>width: 360px</td>
		          </tr>
		          <tr>
		            <td>.w-xl</td>
		            <td>width: 320px</td>
		          </tr>
		          <tr>
		            <td>.w-lg</td>
		            <td>width: 280px</td>
		          </tr>
		          <tr>
		            <td>.w-md</td>
		            <td>width: 240px</td>
		          </tr>
		          <tr>
		            <td>.w</td>
		            <td>width: 200px</td>
		          </tr>
		          <tr>
		            <td>.w-sm</td>
		            <td>width: 158px</td>
		          </tr>
		          <tr>
		            <td>.w-xs</td>
		            <td>width: 90px</td>
		          </tr>
		          <tr>
		            <td>.w-xxs</td>
		            <td>width: 60px</td>
		          </tr>
		          <tr>
		            <td>.w-full</td>
		            <td>width: 100%</td>
		          </tr>
		          <tr>
		            <td>.w-auto-xs</td>
		            <td>width: auto on extremely small screen.</td>
		          </tr>
		          <tr>
		            <td>.h-full</td>
		            <td>height: 100%</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Thumb</td>
		          </tr>
		          <tr>
		            <td>.thumb-xl</td>
		            <td>width: 128px</td>
		          </tr>
		          <tr>
		            <td>.thumb-lg</td>
		            <td>width: 96px</td>
		          </tr>
		          <tr>
		            <td>.thumb-md</td>
		            <td>width: 64px</td>
		          </tr>
		          <tr>
		            <td>.thumb</td>
		            <td>width: 50px</td>
		          </tr>
		          <tr>
		            <td>.thumb-sm</td>
		            <td>width: 48px</td>
		          </tr>
		          <tr>
		            <td>.thumb-xs</td>
		            <td>width: 34px</td>
		          </tr>
		          <tr>
		            <td>.thumb-xxs</td>
		            <td>width: 30px</td>
		          </tr>          
		          <tr>
		            <td>.img-full</td>
		            <td>width: 100%</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Avatar</td>
		          </tr>
		          <tr>
		            <td>.avatar</td>
		            <td>circle photo</td>
		          </tr>
		          <tr>
		            <td>status</td>
		            <td>status, '.on', '.off', '.busy', '.away'</td>
		          </tr>
		          <tr>
		            <td>status position</td>
		            <td>status position, '.left', '.right', '.bottom'</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Arrow</td>
		          </tr>
		          <tr>
		            <td>.arrow</td>
		            <td>base class</td>
		          </tr>
		          <tr>
		            <td>.left</td>
		            <td>left arrow, position:middle</td>
		          </tr>
		          <tr>
		            <td>.right</td>
		            <td>right arrow, position:middle</td>
		          </tr>
		          <tr>
		            <td>.top</td>
		            <td>top arrow, position:center</td>
		          </tr>
		          <tr>
		            <td>.bottom</td>
		            <td>bottom arrow, position:center</td>
		          </tr>
		          <tr>
		            <td>.pull-left</td>
		            <td>.top and .bottom arrow with left position</td>
		          </tr>
		          <tr>
		            <td>.pull-right</td>
		            <td>.top and .bottom arrow with right position</td>
		          </tr>
		          <tr>
		            <td>.pull-up</td>
		            <td>.left and .right arrow with up position</td>
		          </tr>
		          <tr>
		            <td>.pull-down</td>
		            <td>.left and .right arrow with down position</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Item</td>
		          </tr>
		          <tr>
		            <td>.item-overlay</td>
		            <td>overlay the element on an item, default display:none, with '.active' class will show</td>
		          </tr>
		          <tr>
		            <td>.top</td>
		            <td>top element on a item element</td>
		          </tr>
		          <tr>
		            <td>.bottom</td>
		            <td>bottom element on a item element</td>
		          </tr>
		          <tr>
		            <td>.center</td>
		            <td>center element on a item element</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Button</td>
		          </tr>
		          <tr>
		            <td class="w">.btn-rounded</td>
		            <td>rounded button</td>
		          </tr>
		          <tr>
		            <td>.btn-icon</td>
		            <td>icon only button</td>
		          </tr>
		          <tr>
		            <td>.btn-addon</td>
		            <td>icon addon, must have a i tag, and can use .pull-left and .pull-right</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Timeline</td>
		          </tr>
		          <tr>
		            <td class="w">.timeline</td>
		            <td>timeline wrapper class</td>
		          </tr>
		          <tr>
		            <td class="w">.timeline-center</td>
		            <td>timeline with center position</td>
		          </tr>
		          <tr>
		            <td class="w">.tl-item</td>
		            <td>timeline item</td>
		          </tr>
		          <tr>
		            <td class="w">.tl-wrap</td>
		            <td>timeline item wrap</td>
		          </tr>
		          <tr>
		            <td class="w">.tl-date</td>
		            <td>timeline date</td>
		          </tr>
		          <tr>
		            <td class="w">.tl-content</td>
		            <td>timeline content</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Streamline</td>
		          </tr>
		          <tr>
		            <td class="w">.streamline</td>
		            <td>streamline class</td>
		          </tr>
		          <tr>
		            <td class="w">.sl-item</td>
		            <td>streamline item, you can use .b-l and .b-info, b-danger... class to make it colorful.</td>
		          </tr>
		          <tr class="bg-light lt">
		            <td colspan="2">Hbox</td>
		          </tr>
		          <tr>
		            <td>.hbox</td>
		            <td>display: table</td>
		          </tr>
		          <tr>
		            <td>.col</td>
		            <td>display: table-cell</td>
		          </tr>
		          <tr>
		            <td>.v-middle</td>
		            <td>vertical align: middle</td>
		          </tr>
		          <tr>
		            <td>.v-top</td>
		            <td>vertical align: top</td>
		          </tr>
		          <tr>
		            <td>.v-bottom</td>
		            <td>vertical align: bottom</td>
		          </tr>
		        </tbody>
		      </table>
    	</div>
	</div>
</div>